<template>
    <div class="card-container">
      <h1>已取消事项</h1>
      <div class="button-group">
        <el-button type="primary" @click="openDialog">添加奖惩措施</el-button>
        <el-button type="primary" @click="openDialog">添加待办事项</el-button>
      </div>
      <div class="date-picker-container">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          placeholder="选择日期范围"
          @change="filterTodos"
        />
      </div>
      <div class="cards">
        <div v-for="todo in canceledTodos" :key="todo.id" class="card">
          <h4>{{ todo.title }} <span :class="statusClass(todo.status)">{{ statusText(todo.status) }}</span></h4>
          <p>{{ todo.task }}</p>
          <el-progress :percentage="todo.isCompleted" />
          <p>时间: {{ formatDate(todo.startDate) }} — {{ formatDate(todo.dueDate) }}</p>
          <p>奖惩: {{ todo.item }}</p>
          <p>创建时间: {{ formatDate(todo.createdAt) }}</p>
          <div class="button-group">
            <el-button type="success">修改</el-button>
            <el-button type="danger" @click="removeTodo(todo.id)">移除</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  defineProps(['todoList', 'removeTodo', 'statusClass', 'statusText', 'formatDate']);
  const canceledTodos = computed(() => todoList.filter(todo => todo.status === 3));
  </script>
  
  <style scoped>
  .card-container {
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #f9f9f9;
  }
  .date-picker-container {
    margin-bottom: 20px;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 calc(33.333% - 20px);
    margin: 10px;
    padding: 15px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    background-color: #ffffff;
  }
  .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  </style>